{{! corresponding files: login.php & login.json }}

<div class="pure-u-1">
	<p>{{copy_its_free_2}}</p>
		<form action="{{www_path}}/signup/" id="signupform" method="post">
		<input type="hidden" name="dosignup" value="engage" />
			<div class="pure-u-1 pure-u-md-1-3">
				<label for="address">{{label_email}}</label><input type="email" name="address" value="" placeholder="your email address" title="Valid address required" required />
			</div><!--pure-->
			<div class="pure-u-1 pure-u-md-1-3">
				<label for="address">{{label_username}}</label><input type="text" name="username" value="" placeholder="username" title="Required" required />
			</div><!--pure-->
			<div class="pure-u-1 pure-u-md-1-3">
				<label for="address">{{label_password}}</label><input type="password" name="password" id="password" value="" title="At least {{minimum_password_length}} characters" placeholder="at least {{minimum_password_length}} characters" minlength="{{minimum_password_length}}" required /><small><a href="#" id="revealpassword" style="position:relative;top:-12px;color:#666;">{{copy_reveal_text}}</a></small>
			</div><!--pure-->
			<div class="terms">
				<input type="checkbox" class="checkorradio" name="termsread" title="Required" required />{{copy_i_read}}<a href="{{www_path}}/terms/" class="noajax" target="_blank">{{copy_tos}}</a>{{copy_and}}<a href="{{www_path}}/privacy/" class="noajax" target="_blank">{{copy_privacy}}</a>
			</div><!--terms-->
		<input type="submit" class="button" value="Sign up" />
		</form>
</div><!--pure-->

<script type="text/javascript">
	// http://www.electrictoolbox.com/toggle-password-field-text-password/
	(function() {
		try {
			var p = document.getElementById('password');
			p.type = 'password';

			var toggle = document.getElementById('revealpassword');
			toggle.addEventListener('click', toggleClicked, false);
			toggle.style.display = 'inline';
			
		}
		catch(err) {}
	})();

	function toggleClicked(e) {
		e.preventDefault();
		var p = document.getElementById('password');
		var value = p.value;

		if(p.type == 'password') {
			p.type = 'text';
		}
		else {
			p.type = 'password';
		}
		
		p.value = value;
	}
	/*
	$('#do_submit').click(function() {
		var n = $('#password').val();
		if (n.length < {{minimum_password_length}}) {
			alert('Your password must be at least {{minimum_password_length}} characters.');
		} else {
			$('#signupform').submit();
		}
	});
*/
</script>